<template>
  <div>
    <el-card style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span>解散单/部门</span>
      </div>
      <el-form
        ref="deptChange"
        :model="change"
        :rules="rules"
        label-width="150px"
      >
        <el-form-item label="解散的单位/部门" prop="DeptId">
          <deptSelect
            ref="dept"
            v-model="change.DeptId"
            placeholder="解散的单位/部门"
            @change="deptSelectChange"
          />
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <el-button type="primary" @click="save">查询受影响的部门员工</el-button>
      </div>
    </el-card>
    <disbandedDept
      v-if="isLoad"
      :dept-id="deptId"
      @complete="reset"
    />
  </div>
</template>

<script>
import { HrItemDic } from '@/config/publicDic'
import deptSelect from '@/components/unit/deptSelect.vue'
import disbandedDept from './components/disbandedDept.vue'
export default {
  components: {
    deptSelect,
    disbandedDept
  },
  data() {
    return {
      HrItemDic,
      isLoad: false,
      deptId: null,
      rules: {
        DeptId: [
          {
            required: true,
            message: '请选择解散的单位/部门！',
            trigger: 'blur'
          }
        ]
      },
      change: {
        DeptId: null
      }
    }
  },
  computed: {
    comName() {
      const comId = this.$store.getters.curComId
      return this.$store.getters.company[comId]
    },
    comId() {
      return this.$store.getters.curComId
    }
  },
  methods: {
    reset() {
      this.isLoad = false
      this.deptId = null
      this.change = {
        DeptId: null
      }
      this.$refs.dept.reset()
    },
    save() {
      const that = this
      this.$refs['deptChange'].validate((valid) => {
        if (valid) {
          that.deptId = that.change.DeptId
          that.isLoad = true
        } else {
          return false
        }
      })
    }
  }
}
</script>
